<template>
  <div style="min-height: 700px">
    <a-breadcrumb style="margin: 16px 0">
      <a-breadcrumb-item
        ><router-link to="/">Home</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>注册</a-breadcrumb-item>
    </a-breadcrumb>

    <a-row type="flex" justify="center">
      <a-col :md="6" :sm="16" :xs="24">
        <a-card title="注册" class="login">
          <span slot="extra">
            已有账号？<router-link to="/login">登录</router-link>
          </span>
          <a-form
            layout="horizontal"
            class="register-form"
            :form="form"
            @submit="handleSubmit"
          >
            <a-form-item label="邮箱">
              <a-input
                v-decorator="[
                  'email',
                  {
                    rules: [
                      { required: true, message: '请输入邮箱地址!' },
                      {
                        type: 'email',
                        message: '邮箱地址格式错误!'
                      }
                    ]
                  }
                ]"
              />
            </a-form-item>
            <a-form-item label="密码">
              <a-input-password
                v-decorator="[
                  'password',
                  {
                    rules: [{ required: true, message: '请输入密码!' }]
                  }
                ]"
                type="password"
              />
            </a-form-item>
            <a-form-item label="重复密码">
              <a-input-password
                v-decorator="[
                  'password_confirmation',
                  {
                    rules: [{ required: true, message: '请确认密码!' }]
                  }
                ]"
                type="password"
              />
            </a-form-item>
            <a-form-item label="手机号">
              <a-input
                v-decorator="[
                  'phone',
                  {
                    rules: [
                      { required: true, message: '请输入手机号!' },
                      {
                        pattern: /^(1[356789][0-9]{9})$/,
                        message: '手机号码格式错误'
                      }
                    ]
                  }
                ]"
              />
            </a-form-item>
            <a-form-item label="验证码">
              <a-row :gutter="8">
                <a-col :span="16">
                  <a-input
                    v-decorator="[
                      'captcha',
                      {
                        rules: [{ required: true, message: '请输入验证码!' }]
                      }
                    ]"
                  />
                </a-col>
                <a-col :span="8">
                  <a-button
                    block
                    @click="getCaptcha"
                    :disabled="captcha.disabled"
                    >{{ captcha.text }}</a-button
                  >
                </a-col>
              </a-row>
            </a-form-item>
            <a-button
              type="primary"
              block
              html-type="submit"
              :loading="loading"
              class="register_btn"
            >
              注册
            </a-button>
          </a-form>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import _ from "lodash";

export default {
  data() {
    return {
      loading: false,
      form: this.$form.createForm(this),
      captcha: {
        text: "获取验证码",
        disabled: false
      }
    };
  },
  methods: {
    getCaptcha() {
      this.form.validateFields(["phone"], (err, value) => {
        if (!err) {
          this.captcha.disabled = true;

          this.$axios
            .get(process.env.VUE_APP_BACKGROUND_API + "/api/captcha", {
              params: value
            })
            .then(response => {
              if (response.data.ret === "suc") {
                this.countDown(300);
                this.$message.success("手机验证码已发送成功");
              } else {
                this.$message.error(response.data.msg);
              }
            })
            .catch(error => {
              this.$message.error(error.response.data.errors.phone);
              this.captcha.disabled = false;
            });
        }
      });
    },
    countDown(num) {
      this.captcha.text = "等待" + num + "秒";
      num--;
      if (num <= 0) {
        this.captcha.text = "获取验证码";
        this.captcha.disabled = false;
      } else {
        setTimeout(() => {
          this.countDown(num);
        }, 1000);
      }
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        this.loading = true;
        if (!err) {
          this.$axios
            .post(process.env.VUE_APP_BACKGROUND_API + "/api/register", values)
            .then(response => {
              if (response.data.ret == "err") {
                this.$message.error(response.data.msg);
              } else {
                this.$message.success("注册成功，请用注册的账号信息登录");
                this.$router.push("/login");
              }

              this.loading = false;
            })
            .catch(error => {
              this.loading = false;

              if (error.response) {
                if (error.response.status == 422) {
                  this.$message.error(_.values(error.response.data.errors));
                } else {
                  this.$message.error(error.response.data.message);
                }
              } else {
                this.$message.error(error.message);
              }
              this.captcha.text = "获取验证码";
              this.captcha.disabled = false;
            });
        } else {
          this.loading = false;
        }
      });
    }
  }
};
</script>

<style lang="scss">
.register-form {
  .ant-btn {
    margin-top: 0;
  }
  .register_btn {
    margin-top: 15px;
  }
}
</style>
